import React, { Component, Fragment } from "react";

export default class App extends Component {
    constructor(props) {
        super(props)
        this.addFn = this.add1000Handler.bind(this)
    }
    state = {
        count: 1
    }

    add10Handler = () => {
        this.setState({ count: this.state.count + 10 })
    }
    add100Handler() {
        this.setState({ count: this.state.count + 100 })
    }
    add1000Handler() {
        this.setState({ count: this.state.count + 1000 })
    }


    render() {
        return (
            <Fragment>
                {this.state.count}
                {/* 1.直接在render里写行内的箭头函数 */}
                <button onClick={() => {
                    this.setState({ count: this.state.count + 1 })
                }}>+1</button>
                {/* 在组件内使用箭头函数定义的一个方法 */}
                <button onClick={this.add10Handler}>+10</button>
                {/* 直接在组件内定义一个非箭头函数的方法，然后在render里直接使用`onClick={this.handleClick.bind(this)} */}
                <button onClick={this.add100Handler.bind(this)}>+100</button>
                {/* 直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this) */}
                <button onClick={this.addFn}>+1000</button>
            </Fragment>
        )
    }
}